﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>SubtractJS</title>
    <link rel="stylesheet" href="css/subtractjs.css" />
    <link rel="stylesheet" href="css/colors.css" />
    <script type="text/javascript" src="Scripts/jQuery-2.0.3.min.js"></script>
    <script type="text/javascript" src="Scripts/Subtract.min.js"></script>
    <script type="text/javascript" src="Scripts/SubtractJSDocumentation.min.js"></script>
    <style>
        li > a {
            display: block;
            font-size: 1.2em;
        }

        li {
            font-size: .8em;
            margin-bottom: 8px;
        }
        #indexFooter {
            border-top: 2px solid black;
            color: black;
            padding: 6px 25px;
            font-size: .7em;
        }
    </style>
</head>
<body>
    <div class="sj-fill-top header screenSection fancyblue">
        <div>
            <img class="subtractLogo" src="Images/subtract-logo.png" />
            SubtractJS
        </div>
    </div>
    <div class="sj-fill-top menubar">&nbsp;</div>
    <div id="indexFooter" class="sj-fill-bottom">
        * A quick note on resizing.  SubtractJS layouts don't look great when the screen is sized too small.  You can experiment with min-width
        to make this more palatable for your users.  In a future version of SubtractJS, I may be able to make it intelligently handle min-width to prevent
        overlapping elements at small sizes.
    </div>
    <div class="sj-fill articleBody main">
        A commonly-requested layout I have encountered when developing line-of-business web sites is a request to have a
        <span class="accentuate2">fixed-height</span> header/toolbar at the top, a <span class="accentuate2">fixed-width</span> menu on the left,
        and a <span class="accentuate2">fixed-height</span> footer at the bottom, with the rest of the page (the body) dedicated to the specific application
        function.<br />
        <br />
        <div class="sampleArea">
            <div class="sj-fill-top sampleSection">Header</div>
            <div class="sj-fill-bottom sampleSection">Footer</div>
            <div class="sj-fill-left sampleSection sampleSectionLeft">Menu</div>
            <div class="sj-fill sampleSection">Body</div>
        </div>
        <br />
        <h2><a href="Introduction.html">Introduction</a></h2>
        Introducing SubtractJS.  How it works and how to quickly put together a SubtractJS layout.<br />
        <br />
        <h2><a href="Guidelines.html">Guidelines</a></h2>
        How to get the most out of SubtractJS.  Which css properties does SubtractJS manipulate and which properties you should set to
        get the most out of it.
        <br />
        <br />
        <h2><a href="Preview.html">Preview</a></h2>
        A interactive preview.  See a couple of different layouts and style sheets and what they look like together.
        <br />
        <br />
        <h2><a href="Samples.html">SubtractJS Samples</a></h2>
        These samples pages demonstrate using SubtractJS in a few common scenarios.  The samples have the styles embedded in them
        and depend on jQuery and SubtractJS only.<br />
        <br />
    </div>
</body>
</html>
